
<template>
  <div class="container">
    <div class="navigationBar" style="width: 98%;margin: 10px auto 0">
      <el-row :gutter="24">

        <el-col :span="3">
          <el-input v-model="listQuery.activity_id" placeholder="请输入活动名称" clearable @change="search"></el-input>
        </el-col>

        <el-col :span="2">
          <el-select v-model="listQuery.used" placeholder="优惠券状态">
            <el-option
              v-for="item in used_options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>

        <el-col  :span="16">
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-col>

        <el-col :span="3"  align="center" class="add-store">
          <el-button type="success" @click="handleAdd">增加优惠券</el-button>
        </el-col>
      </el-row>
    </div>


    <div class="filter-container">
      <el-checkbox v-model="formThead.activity_id" label="优惠券所属活动">优惠券所属活动</el-checkbox>
      <el-checkbox v-model="formThead.deduction_amount" label="减免金额">减免金额</el-checkbox>
      <el-checkbox v-model="formThead.customer_id" label="优惠券所属用户">优惠券所属用户</el-checkbox>
      <el-checkbox v-model="formThead.start_date" label="开始时间">开始时间</el-checkbox>
      <el-checkbox v-model="formThead.end_date" label="结束时间">结束时间</el-checkbox>
      <el-checkbox v-model="formThead.customer_receive_date" label="领取日期">领取日期</el-checkbox>
      <el-checkbox v-model="formThead.used" label="状态">状态</el-checkbox>
      <el-checkbox v-model="formThead.used_date" label="使用时间">使用时间</el-checkbox>
    </div>

    <el-table :data="couponList" class="table" border :key="couponList.length"
              v-loading="loading"
              element-loading-text="拼命加载中....">
      <el-table-column label="优惠券所属活动" align="center" v-if="formThead.activity_id">
        <template slot-scope="{row}">
          <span>{{getActivityName(row.activity_id)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="减免金额" align="center" v-if="formThead.deduction_amount">
        <template slot-scope="{row}">
          <span>{{row.deduction_amount}}</span>
        </template>
      </el-table-column>
      <el-table-column label="优惠券所属用户" align="center" v-if="formThead.customer_id">
        <template slot-scope="{row}">
          <span v-if="row.customer_id == 0" style="color: #F56C6C">未领取</span>
          <span v-else>{{getCustomerName(row.customer_id)}}</span>
        </template>
      </el-table-column>

      <el-table-column label="开始时间" align="center" v-if="formThead.start_date">
        <template slot-scope="{row}">
          <i class="el-icon-time"></i>
          <span>{{row.start_date}}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center" v-if="formThead.end_date">
        <template slot-scope="{row}">
          <i class="el-icon-time"></i>
          <span>{{row.end_date}}</span>
        </template>
      </el-table-column>

      <el-table-column label="领取日期" align="center" v-if="formThead.customer_receive_date">
        <template slot-scope="{row}">
          <i class="el-icon-time"></i>
          <span>{{row.customer_receive_date}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="tag" label="状态" align="center" v-if="formThead.used">
        <template slot-scope="scope">
          <el-tag :type="scope.row.used == 0 ? 'danger' : 'primary'" disable-transitions>
            {{scope.row.used == 0 ? '未使用':'已使用'}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="使用时间" align="center" v-if="formThead.used_date">
        <template slot-scope="{row}">
          <i class="el-icon-time"></i>
          <span>{{row.used_date}}</span>
        </template>
      </el-table-column>


      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <!-- 编辑活动 -->
          <el-button size="mini" type="primary" @click="handleEdit(row)">编辑</el-button>
          <!-- 根据activity_id将活动删除 -->
          <el-button type="danger" @click="openDelete(row.activity_coupon_id)" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[10,15,20,30,50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>

    <add-coupon ref="showAddDialog"/>
    <edit-coupon ref="showEditDialog"/>
  </div>
</template>


<script>
  import store from '@/store'
  import {list, del} from '@/api/thk/coupon'
  import {list as getCustomerList} from '@/api/thk/customer'
  import {list as getActivityList} from '@/api/thk/activity'


  import AddCoupon from './add'
  import EditCoupon from './edit'

  export default {
    name: 'Store',
    components: {
      AddCoupon,
      EditCoupon

    },
    data() {
      return {
        // save storeList field
        couponList: [],
        // 按店铺名搜索店铺
        searchText: '',
        customerList: [],
        activityList: [],
        formThead: {
          activity_id: true,
          deduction_amount: true,
          customer_id: true,
          start_date: true,
          end_date: true,
          customer_receive_date: true,
          used: true,
          used_date: true,
        },

        total: undefined,


        listQuery: {
          activity_id: undefined,
          used:undefined,
          page: 1,
          pagesize: 10
        },

        used_options: [{
          value: '0',
          label: '未使用'
        }, {
          value: '1',
          label: '已使用'
        }, {
          value: '',
          label: '全部'
        }],
        loading: true
      }
    },

    // created生命周期中调用获取互动列表方法
    created() {
      this.getCustomerList()
      this.getActivityList()
      this.getCouponList()
    },

    // 页面数据加载完毕
    updated: function () {
      this.$nextTick(function () {
        this.loading = false
      })
    },

    methods: {
      // 获取优惠券列表
      getCouponList(){
        list(store.getters.token, this.listQuery).then(res =>{
          this.total = res.data.list.total
          this.couponList = res.data.list.data
          console.log("优惠券........")
          console.log(this.couponList)
        },error => {
          console.log(error)
        })
      },

      // 弹出add Dialog
      handleAdd(){
        this.$refs.showAddDialog.cancelSubmit(this.activityList)

      },


      // 弹出编辑对话框
      handleEdit(row){
        // this.$refs.showEditDialog.showEditDialog(row, this.customerList)
        this.$refs.showEditDialog.showEditDialog(row, this.customerList, this.activityList)
      },


      // 删除优惠券
      handleDelete(activity_coupon_id){
        del(store.getters.token, activity_coupon_id).then(res => {
          // 删除之后，需要重新渲染.重新查询数据，会根据数据的length重新渲染
          this.getCouponList()
          console.log("删除成功!",res)
        }).catch(err => {
          console.log("删除失败",err)
        })
      },
      // 弹出是否删除对话框, then中调用handleDelete
      openDelete(activity_coupon_id) {
        this.$confirm('此操作将会删除优惠券, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleDelete(activity_coupon_id)
          this.$message({
            type: 'success',
            message: '删除成功!'

          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 搜索功能
      search(){
        this.listQuery.page = 1
        this.getCouponList()
      },

      // 获取用户列表
      getCustomerList(){
        getCustomerList(store.getters.token).then(res=>{
          this.customerList = res.data.list.data
        }).then(err => {
          console.log(err)
        })
      },

      // 根据用户id返回用户名,用于显示店铺所属用户
      getCustomerName(customer_id){
        if(customer_id == 0){
          return '未领取'
        }
        let customers = this.customerList.filter(customer => {
          return customer.customer_id == customer_id
        })

        if(customers[0]){
          return customers[0].nickname
        }

        return ''

      },

      // 获取活动列表
      getActivityList(){
        getActivityList(store.getters.token).then(res =>{
          this.activityList = res.data.list.data
          console.log('activity')
          console.log(this.activityList)
        },error => {
          console.log(error)
        })
      },

      getActivityName(activity_id){
        let activitys = this.activityList.filter(activity => {
          return activity.activity_id == activity_id
        })

        if(activitys[0]){
          return activitys[0].name
        }
        return ''
      },

      handleSizeChange(val) {
        this.listQuery.pagesize = val
        this.getCouponList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getCouponList()
      },
    }
  }
</script>

<style scoped>
  .filter-container{
    margin: 10px 0 0 20px;
  }
  .table{
    width: 98%;
    margin: 10px auto 0;
  }
  .add-store{
    position: relative;
    top: 35px;
  }
</style>
